<template>
  <page-wrap back hide-tab :title="'常用语管理（'+ length +'/15）'" stay-still navLeft>
    <view class="common-terms">
      <view class="common-terms-list">
        <view
          class="common-terms-list-item u-border-bottom"
          v-for="(item, index) in list"
          :key="item.id"
        >
          <view>{{ item.commonLanguage }}</view>
          <view class="operate">
            <view class="operate-item" @click="handleEdit(item)">
              <text class="icon icon-edit"></text>
              <text>编辑</text>
            </view>
            <view class="operate-item"  @click="handleDelete(item, index)">
              <text class="icon icon-delete"></text>
              <text>删除</text>
            </view>
          </view>
        </view>
        <view class="empty" v-if="!list.length">
          <Empty
            :baseImg="emptyImg"
            text=" " 
            label="使用常用语，秒回消息，给对方留下一个好印象"
            class="empty"
          ></Empty>
        </view>
       
      </view>
      <view class="fixed-bottom">
        <view class="btn btn-primary btn-add" @click="handleAdd">新增常用语</view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import Empty from '@/components/Empty';
import { commonTermsList, deleteCommonTerms } from '@/api/modules/message';

export default {
  components: {
    Empty,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || '',
      loginStatus: uni.getStorageSync("login-status") || "person",
      list: [],
      emptyImg: this.$imgBaseSelf + 'message/empty_common.png',
      deleteLoading: false,
    };
  },
  computed: {
    length() {
      return this.list.length;
    }
  },
  onShow() {
    this.getData();
  },
  beforeDestroy() {
		this.$bus.$emit('updataCommonTerms');
  },
  methods: {
    getData() {
      const params = {
        personId: this.personId,
        type: this.loginStatus == 'person'? 1: 2,
      }
      commonTermsList(params).then(res => {
        if(res.code == 200) {
          this.list = res.data;
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: 'none',
            duration: 1000
          });
        }
      })
    },
    handleAdd() {
      if(this.list.length >= 15) {
        return uni.showToast({
          title: '常用语个数已达上限',
          icon: 'none',
        });
      }
      uni.navigateTo({
        url: "/pagesSub/message/commonTerms/edit",
      });
    },
    handleEdit(item) {
      uni.navigateTo({
        url: "/pagesSub/message/commonTerms/edit?id="+item.id,
      });
    },
    handleDelete(item, index) {
      if(this.deleteLoading) return;
      
      const params = {
        commonLanguageId: item.id,
        personId: this.personId,
      };
      this.deleteLoading = true;
      uni.showLoading();
      deleteCommonTerms(params).then(res => {
        this.deleteLoading = false;
        uni.hideLoading();
        if(res.code == 200) {
          this.list.splice(index, 1);
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: 'none',
            duration: 1000
          });
        }
      }).catch(err => {
        this.deleteLoading = false;
        uni.hideLoading();
      })

    },
  },
};
</script>

<style lang="scss" scoped>
.common-terms {
  flex: 1;
  padding-bottom: 100rpx;
  background-color: #FFF;

  &-list {
    padding: 0 32rpx 16rpx 32rpx;
    &-item {
      padding: 40rpx 0;
    }
  }

  .operate {
    display: flex;
    justify-content: flex-end;
    margin-top: 12rpx;

    &-item {
      margin-left: 60rpx;
      font-size: 24rpx;
    }
    .icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 6rpx;
      vertical-align: text-top;
    }
    .icon-edit {
      background-image: url($img-base + 'message/edit.png');
    }
    .icon-delete {
      background-image: url($img-base + 'message/delete.png');
    }
  }
  .empty {
    padding-top: 333rpx;
  }
}
.fixed-bottom {
  position: fixed;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  padding: 24rpx 32rpx;
  z-index: 2;

  .btn-add {
    font-size: $uni-font-size-base;
  }
}
</style>